<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <HeaderView />
            </el-header>
            <el-main>
                <div class="home-box">
                    <div class="detail-view" v-if="attractions.name">
                        <div class="intro-section">
                            <div class="carousel-wrapper">
                                <el-carousel>
                                    <el-carousel-item v-for="(img, index) in url" :key="index">
                                        <img :src="img.url" alt="轮播图" />
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div class="info-wrapper">
                                <h1 class="attraction-name">{{ attractions.name }}</h1>
                                <p class="attraction-description"><strong>介绍：</strong>{{ attractions.description }}</p>
                                <p class="info-item"><strong>开放时间：</strong>{{ attractions.openTime }}</p>
                                <p class="info-item"><strong>票价：</strong>{{ attractions.ticketPrice }}</p>
                                <p class="info-item" style="cursor: pointer;" @click="gotuMapA">
                                    <svg style="width: 20px;height: 20px;" t="1740231381115" class="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                        p-id="2818" width="200" height="200">
                                        <path
                                            d="M512 0C294.208 0 117.034667 177.152 117.056 394.922667c0 80.896 24.298667 158.677333 69.781333 224.149333 2.282667 3.925333 4.586667 7.722667 7.296 11.413333l288.277333 379.989333C490.24 1019.2 500.757333 1024 512.021333 1024c11.114667 0 21.696-4.842667 30.848-15.104l286.954667-378.474667c2.837333-3.754667 5.248-7.872 6.570667-10.282667 46.144-66.389333 70.570667-144.256 70.570667-225.173333C906.965333 177.152 729.792 0 512 0zM512 536.170667c-77.781333 0-141.077333-63.296-141.077333-141.098667 0-77.781333 63.296-141.056 141.077333-141.056 77.781333 0 141.077333 63.296 141.077333 141.056C653.077333 472.874667 589.781333 536.170667 512 536.170667z"
                                            p-id="2819" fill="#2c2c2c"></path>
                                    </svg>
                                    <strong>地址：</strong>{{ attractions.address }}
                                    <span style="margin: 0 10px;color: #B01F24;">(点击查看地址)</span>
                                </p>
                            </div>
                        </div>
                        <div class="stats-section">
                            <p style="font-size: 14px; cursor: pointer;flex: 2;text-align: center;"
                                @click="likeAttraction">
                                <svg style="width: 20px;height: 20px;" t="1739791757510" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615"
                                    width="200" height="200">
                                    <path
                                        d="M913.92 208.384c-98.816-98.816-258.56-98.816-357.376 0l-41.984 41.984-41.984-41.984c-98.816-98.816-258.56-98.816-357.376 0-98.304 98.816-98.304 258.56 0.512 357.376l52.224 52.224 337.408 337.408c5.632 5.632 14.336 5.632 19.968 0l337.408-337.408 52.224-52.224c97.792-98.816 97.792-258.56-1.024-357.376z"
                                        fill="#FC053B" p-id="2616"></path>
                                </svg>
                                点赞({{ attractions.likeCount }})
                            </p>
                            <p style="flex: 2;text-align: center;cursor: pointer;" @click="feedbackAttraction">
                                <svg style="width: 20px;height: 20px;" t="1739794037559" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5071"
                                    width="200" height="200">
                                    <path
                                        d="M833.618067 190.023783 184.24223 190.023783c-47.787349 0-86.67213 38.884781-86.67213 86.67213l0 445.12841c0 47.787349 38.884781 86.67213 86.67213 86.67213l649.375837 0c47.787349 0 87.695413-38.884781 87.695413-86.67213l0-445.12841C921.313481 228.908564 881.405416 190.023783 833.618067 190.023783zM835.255321 245.281103 550.066154 484.013191c-22.716898 19.033077-55.564305 18.930748-78.281203 0L187.312082 245.281103l646.408314 0C834.232038 245.281103 834.743679 245.281103 835.255321 245.281103zM833.618067 753.136804 185.265514 753.136804c-17.293495 0-31.41481-14.121315-31.41481-31.41481L153.850705 289.384631l282.426302 236.992505c21.591286 18.112122 48.196662 27.219346 74.69971 27.219346 26.503048 0 53.006096-9.004897 74.597382-27.117018l279.458779-234.024983L865.032877 721.721995C865.032877 739.117818 851.01389 753.136804 833.618067 753.136804z"
                                        p-id="5072"></path>
                                </svg>
                                反馈
                            </p>
                            <p style="flex: 2;text-align: center;cursor: pointer;" @click="goA">
                                <svg style="width: 20px;height: 20px;" t="1739808434637" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8301"
                                    width="200" height="200">
                                    <path
                                        d="M516.736 407.872c18.496 11.584 41.152 27.072 62.208 42.048 41.664 29.568 201.472 18.176 266.688 23.488C910.784 478.656 960 493.056 960 493.056l-90.88-150.784c0 0 98.496-147.776 86.336-144.704-12.032 3.072-73.408 4.544-113.6-6.784s-132.608-12.096-195.52-12.096c-46.656 0-103.424-40.128-129.536-60.8L516.8 67.264 443.2 67.264l0 784.96 73.536 0L516.736 407.872z"
                                        fill="#2c2c2c" p-id="8302"></path>
                                    <path
                                        d="M619.904 680.64l0 55.296c105.024 14.08 177.536 44.16 177.536 79.04 0 48.384-139.2 87.616-310.784 87.616s-310.72-39.232-310.72-87.616c0-34.176 69.696-63.744 171.2-78.208l0-55.488C182.272 700.608 64 753.28 64 814.976c0 78.336 189.184 141.76 422.656 141.76s422.656-63.424 422.656-141.76C909.248 752.448 787.968 699.328 619.904 680.64z"
                                        fill="#2c2c2c" p-id="8303"></path>
                                </svg>
                                勇敢冒险
                            </p>
                        </div>
                        <div class="comments-section">
                            <h2>评论({{ comments.length }})</h2>
                            <div v-for="comment in comments" :key="comment.name" class="comment">
                                <div class="comment-user">
                                    <img :src="comment.image" alt="用户头像" class="user-avatar" />
                                    <p>{{ comment.name }}</p>
                                </div>
                                <p style="margin: 10px 0;">{{ comment.commentContent }}</p>
                            </div>
                        </div>
                        <!-- 发布评论部分 -->
                        <div class="publish-comment">
                            <input type="text" v-model="newComment" placeholder="写下你的评论..." class="comment-input" />
                            <el-button type="primary" @click="submitComment">发布评论</el-button>
                        </div>
                    </div>
                    <div v-if="showFeedbackA" class="feedback-overlay" @click="closeFeedback">
                        <div class="feedback-modal" @click.stop>
                            <h2 style="text-align: center;">景点反馈</h2>
                            <textarea style="display: block;margin: 20px auto;" v-model="feedbackContent"
                                placeholder="请输入您的反馈..." rows="4"></textarea>
                            <div style="text-align: center;">
                                <el-button type="primary" @click="submitFeedbackA">提交</el-button>
                                <el-button @click="closeFeedback">关闭</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="detail-view" v-if="cuisines.name">
                        <div class="intro-section">
                            <div class="carousel-wrapper">
                                <el-carousel>
                                    <el-carousel-item v-for="(img, index) in url" :key="index">
                                        <img :src="img.url" alt="轮播图" />
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div class="info-wrapper">
                                <h1 class="attraction-name">{{ cuisines.name }}</h1>
                                <p class="attraction-description"><strong>介绍：</strong>{{ cuisines.description }}</p>
                                <p class="info-item"><strong>开放时间：</strong>{{ cuisines.openTime }}</p>
                                <p class="info-item"><strong>价格：</strong>{{ cuisines.ticketPrice }}</p>
                                <p class="info-item" style="cursor: pointer;" @click="gotuMapC">
                                    <svg style="width: 20px;height: 20px;" t="1740231381115" class="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                        p-id="2818" width="200" height="200">
                                        <path
                                            d="M512 0C294.208 0 117.034667 177.152 117.056 394.922667c0 80.896 24.298667 158.677333 69.781333 224.149333 2.282667 3.925333 4.586667 7.722667 7.296 11.413333l288.277333 379.989333C490.24 1019.2 500.757333 1024 512.021333 1024c11.114667 0 21.696-4.842667 30.848-15.104l286.954667-378.474667c2.837333-3.754667 5.248-7.872 6.570667-10.282667 46.144-66.389333 70.570667-144.256 70.570667-225.173333C906.965333 177.152 729.792 0 512 0zM512 536.170667c-77.781333 0-141.077333-63.296-141.077333-141.098667 0-77.781333 63.296-141.056 141.077333-141.056 77.781333 0 141.077333 63.296 141.077333 141.056C653.077333 472.874667 589.781333 536.170667 512 536.170667z"
                                            p-id="2819" fill="#2c2c2c"></path>
                                    </svg>
                                    <strong>地址：</strong>{{ cuisines.address }}
                                    <span style="margin: 0 10px;color: #B01F24;">(点击查看地址)</span>
                                </p>

                            </div>
                        </div>
                        <div class="stats-section">
                            <p style="font-size: 14px; cursor: pointer;flex: 2;text-align: center;"
                                @click="likeCuisines">
                                <svg style="width: 20px;height: 20px;" t="1739791757510" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615"
                                    width="200" height="200">
                                    <path
                                        d="M913.92 208.384c-98.816-98.816-258.56-98.816-357.376 0l-41.984 41.984-41.984-41.984c-98.816-98.816-258.56-98.816-357.376 0-98.304 98.816-98.304 258.56 0.512 357.376l52.224 52.224 337.408 337.408c5.632 5.632 14.336 5.632 19.968 0l337.408-337.408 52.224-52.224c97.792-98.816 97.792-258.56-1.024-357.376z"
                                        fill="#FC053B" p-id="2616"></path>
                                </svg>
                                点赞({{ cuisines.likeCount }})
                            </p>
                            <p style="flex: 2;text-align: center;cursor: pointer;" @click="feedbackCuisines">
                                <svg style="width: 20px;height: 20px;" t="1739794037559" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5071"
                                    width="200" height="200">
                                    <path
                                        d="M833.618067 190.023783 184.24223 190.023783c-47.787349 0-86.67213 38.884781-86.67213 86.67213l0 445.12841c0 47.787349 38.884781 86.67213 86.67213 86.67213l649.375837 0c47.787349 0 87.695413-38.884781 87.695413-86.67213l0-445.12841C921.313481 228.908564 881.405416 190.023783 833.618067 190.023783zM835.255321 245.281103 550.066154 484.013191c-22.716898 19.033077-55.564305 18.930748-78.281203 0L187.312082 245.281103l646.408314 0C834.232038 245.281103 834.743679 245.281103 835.255321 245.281103zM833.618067 753.136804 185.265514 753.136804c-17.293495 0-31.41481-14.121315-31.41481-31.41481L153.850705 289.384631l282.426302 236.992505c21.591286 18.112122 48.196662 27.219346 74.69971 27.219346 26.503048 0 53.006096-9.004897 74.597382-27.117018l279.458779-234.024983L865.032877 721.721995C865.032877 739.117818 851.01389 753.136804 833.618067 753.136804z"
                                        p-id="5072"></path>
                                </svg>
                                反馈
                            </p>
                            <p style="flex: 2;text-align: center;cursor: pointer;" @click="goB">
                                <svg style="width: 20px;height: 20px;" t="1739808434637" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8301"
                                    width="200" height="200">
                                    <path
                                        d="M516.736 407.872c18.496 11.584 41.152 27.072 62.208 42.048 41.664 29.568 201.472 18.176 266.688 23.488C910.784 478.656 960 493.056 960 493.056l-90.88-150.784c0 0 98.496-147.776 86.336-144.704-12.032 3.072-73.408 4.544-113.6-6.784s-132.608-12.096-195.52-12.096c-46.656 0-103.424-40.128-129.536-60.8L516.8 67.264 443.2 67.264l0 784.96 73.536 0L516.736 407.872z"
                                        fill="#2c2c2c" p-id="8302"></path>
                                    <path
                                        d="M619.904 680.64l0 55.296c105.024 14.08 177.536 44.16 177.536 79.04 0 48.384-139.2 87.616-310.784 87.616s-310.72-39.232-310.72-87.616c0-34.176 69.696-63.744 171.2-78.208l0-55.488C182.272 700.608 64 753.28 64 814.976c0 78.336 189.184 141.76 422.656 141.76s422.656-63.424 422.656-141.76C909.248 752.448 787.968 699.328 619.904 680.64z"
                                        fill="#2c2c2c" p-id="8303"></path>
                                </svg>
                                勇敢冒险
                            </p>
                        </div>
                        <div class="comments-section">
                            <h2>评论({{ comments.length }})</h2>

                            <div v-for="comment in comments" :key="comment.name" class="comment" v-if="comments">
                                <div class="comment-user">
                                    <img :src="comment.image" alt="用户头像" class="user-avatar" />
                                    <p>{{ comment.name }}</p>
                                </div>
                                <p style="margin: 10px 0;">{{ comment.commentContent }}</p>
                            </div>
                        </div>
                        <!-- 发布评论部分 -->
                        <div class="publish-comment">
                            <input type="text" v-model="newComment" placeholder="写下你的评论..." class="comment-input" />
                            <el-button type="primary" @click="submitCommentC">发布评论</el-button>
                        </div>
                    </div>
                    <div v-if="showFeedbackC" class="feedback-overlay" @click="closeFeedback">
                        <div class="feedback-modal" @click.stop>
                            <h2 style="text-align: center;">美食反馈</h2>
                            <textarea style="display: block;margin: 20px auto;" v-model="feedbackContent"
                                placeholder="请输入您的反馈..." rows="4"></textarea>
                            <div style="text-align: center;">
                                <el-button type="primary" @click="submitFeedbackC">提交</el-button>
                                <el-button @click="closeFeedback">关闭</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer>
                <FooterView />
            </el-footer>
        </el-container>
    </div>
</template>

<script>
import req from '../utils/request';
import HeaderView from '@/view/HeaderView.vue';
import FooterView from '@/view/FooterView.vue';
import { mapGetters } from 'vuex'; // 导入 mapGetters

export default {
    name: 'DetailView',
    components: {
        HeaderView,
        FooterView
    },
    computed: {
        ...mapGetters(['userInfo']) // 映射 Vuex 的 getter
    },
    data() {
        return {
            attractions: {},  // 用于存储传递的详情数据
            url: [],          // 存储轮播图的 URL
            cuisines: {},
            comments: [],
            newComment: '',    // 新评论内容
            showFeedbackA: false, // 控制反馈模态框的显示
            showFeedbackC: false, // 控制反馈模态框的显示
            feedbackContent: ''  // 反馈内容
        };
    },
    async mounted() {
        const { type, id } = this.$route.params;
        await this.fetchItemDetails(type, id);
    },
    methods: {
        async fetchItemDetails(type, id) {
            if (type === 'attraction') {
                const res = await req.get(`/attractions/getInfo/${id}`);
                this.attractions = res.data.attractions;
                this.url = res.data.list;
                const res1 = await req.get(`/attractionComments/getByid/${id}`)
                if (res1.code == 200) {
                    this.comments = res1.data

                }
            } else if (type === 'cuisine') {
                const res = await req.get(`/cuisines/getInfo/${id}`);
                this.cuisines = res.data.cuisines;
                this.url = res.data.list;
                const res1 = await req.get(`/cuisineComments/getByid/${id}`)
                if (res1.code == 200) {
                    this.comments = res1.data

                }
            }
        },
        submitComment() {
            if (this.newComment.trim() === '') {
                alert('评论内容不能为空');
                return;
            }
            // 这里可以添加请求将评论提交到后端
            const commentData = {
                attractionId: this.attractions.attractionId,
                userId: this.userInfo.uid,
                commentContent: this.newComment
            };
            console.log(this.userInfo);
            req.post('/attractionComments/save', commentData).then(res => {
                if (res.code === 200) {
                    this.$message({
                        message: '发布成功，等待审核',
                        type: 'warning'
                    });
                    location.reload();
                } else {
                    alert('评论发布失败');
                }
            });
        },
        submitCommentC() {
            if (this.newComment.trim() === '') {
                alert('评论内容不能为空');
                return;
            }
            // 这里可以添加请求将评论提交到后端
            const commentData = {
                cuisineId: this.cuisines.cuisineId,
                userId: this.userInfo.uid,
                commentContent: this.newComment
            };
            console.log(this.userInfo);
            req.post('/cuisineComments/save', commentData).then(res => {
                if (res.code === 200) {
                    this.$message({
                        message: '发布成功，等待审核',
                        type: 'warning'
                    });
                    location.reload();
                } else {
                    alert('评论发布失败');
                }
            });
        },
        likeAttraction() {
            req.get(`/attractions/like/${this.attractions.attractionId}`).then(res => {
                location.reload();
            })
        },
        likeCuisines() {
            req.get(`/cuisines/like/${this.cuisines.cuisineId}`).then(res => {
                location.reload();
            })
        },
        // 反馈函数
        feedbackCuisines() {
            this.showFeedbackC = true; // 显示反馈模态框
        },
        closeFeedback() {
            this.showFeedbackA = false; // 关闭反馈模态框
            this.showFeedbackC = false; // 关闭反馈模态框
        },
        submitFeedbackC() {
            if (this.feedbackContent.trim() === '') {
                alert('反馈内容不能为空');
                return;
            }
            // 这里可以添加请求将反馈提交到后端
            const cuisineFeedback = {
                cuisineId: this.cuisines.cuisineId,
                userId: this.userInfo.uid,
                feedbackContent: this.feedbackContent
            };
            req.post('/cuisineFeedback/save', cuisineFeedback).then(res => {
                if (res.code === 200) {
                    alert('反馈提交成功');
                    this.closeFeedback(); // 关闭模态框
                } else {
                    alert('反馈提交失败');
                }
            });
        },
        feedbackAttraction() {
            this.showFeedbackA = true; // 显示反馈模态框
        },

        submitFeedbackA() {
            if (this.feedbackContent.trim() === '') {
                alert('反馈内容不能为空');
                return;
            }
            // 这里可以添加请求将反馈提交到后端
            const attractionFeedback = {
                attractionId: this.attractions.attractionId,
                userId: this.userInfo.uid,
                feedbackContent: this.feedbackContent
            };
            req.post('/attractionFeedback/save', attractionFeedback).then(res => {
                if (res.code === 200) {
                    alert('反馈提交成功');
                    this.closeFeedback(); // 关闭模态框
                } else {
                    alert('反馈提交失败');
                }
            });
        },
        goA() {
            req.post("/go/save", { tid: this.attractions.attractionId, uid: this.userInfo.uid, type: "景点" }).then(res => {
                if (res.code == 200) {
                    alert("添加成功");
                } else {
                    alert("添加失败");
                }
            })
        },
        goB() {
            req.post("/go/save", { tid: this.cuisines.cuisineId, uid: this.userInfo.uid, type: "美食" }).then(res => {
                if (res.code == 200) {
                    alert("添加成功");
                } else {
                    alert("添加失败");
                }
            })
        },
        gotuMapA() {
            this.$router.push({
                name: 'map',
                query: {
                    path: '/detail/attraction/' + this.attractions.attractionId,
                    jd: this.attractions.jd,
                    wd: this.attractions.wd
                }
            });

        },
        gotuMapC() {
            this.$router.push({
                name: 'map',
                query: {
                    path: '/detail/cuisine/' + this.cuisines.cuisineId,
                    jd: this.cuisines.jd,
                    wd: this.cuisines.wd
                }
            });

        }
    }
}
</script>

<style scoped>
.detail-view {
    padding: 20px;
}

.detail-view img {
    max-width: 100%;
    /* height: auto; */
}

.carousel-wrapper img {
    max-height: auto;

}

.home-box {
    width: 1200px;
    margin: 0 auto 20px;
    background-color: white;
    min-height: 600px;
    position: relative;
    z-index: 1;
    padding-top: 52px;
}

.intro-section {
    display: flex;
    /* margin-bottom: 20px; */
}

.carousel-wrapper {
    flex: 1;
    margin-right: 20px;
}

.info-wrapper {
    flex: 1;
}

.attraction-name {
    font-size: 36px;
    /* 设置名称的字体大小 */
    font-weight: bold;
    /* 加粗 */
    /* margin-bottom: 20px;  */
}

.attraction-description {
    margin-bottom: 15px;
    /* 增加介绍与其他信息项之间的距离 */
}

.info-item {
    margin-bottom: 15px;
    /* 增加信息项之间的距离 */
}

.stats-section {
    width: 570px;
    display: flex;
    justify-content: space-between;
    /* 左对齐 */
    margin: 20px 0;
    /* 上下边距 */
}

.comments-section {
    margin-top: 20px;
}

.comment {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.comment-user {
    display: flex;
    align-items: center;
}

.user-avatar {
    width: 50px;
    /* 设置头像大小 */
    height: 50px;
    /* 设置头像大小 */
    border-radius: 50%;
    /* 圆形头像 */
    margin-right: 10px;
    /* 头像与姓名之间的间距 */
}

.publish-comment {
    display: flex;
    align-items: center;
    margin-top: 20px;
    /* 增加与上方内容的间距 */
}

.comment-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
    /* 输入框与按钮之间的间距 */
}

.feedback-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.feedback-modal {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
}
</style>